import React from 'react';
import { Card, Form, DatePicker, Row, Col, Input, Button, Table, Tabs, Select, Modal } from 'antd';

import { ExclamationCircleOutlined } from '@ant-design/icons';

import image1 from '@/assets/image/20-1.png';
import image2 from '@/assets/image/20-2.png';
import image3 from '@/assets/image/20-3.png';
import image4 from '@/assets/image/20-4.png';
import image5 from '@/assets/image/20-5.png';
import image6 from '@/assets/image/20-6.png';
import image7 from '@/assets/image/20-7.png';
import image8 from '@/assets/image/20-8.png';

const { RangePicker } = DatePicker;

const { TabPane } = Tabs;

const { Option } = Select;

import { FormInstance } from 'antd/lib/form';

const { Meta } = Card;

const { confirm } = Modal;

const columns = [
	{
	    title: '日期',
	    dataIndex: 'name',
	    key: 'name',
	    width: 180,
	    render: (_,item) => {
	    	return '2021-02-27 10:41:35'
	    }
	},
	{
	    title: '单号',
	    dataIndex: 'name',
	    key: 'name',
	    width: 180,
	    render: (_,item) => {
	    	return '123456789'
	    }
	},
	{
	    title: '商品',
	    dataIndex: 'name',
	    key: 'name',
	    width: 300,
	    render: (_,item) => {
	    	return '50元现金红包'
	    }
	},
	{
	    title: '数量',
	    dataIndex: 'name',
	    key: 'name',
	    width: 120,
	    render: (_,item) => {
	    	return '100'
	    }
	},
	{
	    title: '积分',
	    dataIndex: 'name',
	    key: 'name',
	    width: 140,
	    render: (_,item) => {
	    	return '20000'
	    }
	},
	{
	    title: '手机号/账号',
	    dataIndex: 'name',
	    key: 'name',
	    width: 200,
	    render: (_,item) => {
	    	return '王某某 44327894@qq.com'
	    }
	},
	{
	    title: '备注',
	    dataIndex: 'name',
	    key: 'name',
	    width: 220,
	    render: (_,item) => {
	    	return '九死一生'
	    }
	},
	{
	    title: '状态',
	    dataIndex: 'name',
	    key: 'name',
	    width: 120,
	    render: (_,item) => {
	    	return '处理中'
	    }
	},
]

const columns1 = [
	{
	    title: '日期',
	    dataIndex: 'name',
	    key: 'name',
	    width: 240,
	    render: (_,item) => {
	    	return _
	    }
	},
	{
	    title: '备注',
	    dataIndex: 'name1',
	    key: 'name1',
	    width: 240,
	    render: (_,item) => {
	    	return _
	    }
	},
	{
	    title: '积分',
	    dataIndex: 'name2',
	    key: 'name2',
	    width: 240,
	    render: (_,item) => {
	    	
	    	if(item.name2.indexOf('+') !== -1){
	    		return <span style={{color: 'rgb(247, 49, 49)'}}> {_} </span>
	    	}else{
	    		return <span style={{color: 'rgb(36, 64, 179)'}}> {_}</span>	
	    	}
	    	return _
	    }
	},
	{
	    title: '剩余积分',
	    dataIndex: 'name3',
	    key: 'name3',
	    width: 240,
	    render: (_,item) => {
	    	return _
	    }
	},
]

let dataSource = [{
	key: '1'
}];

let dataSource1 = [{
	key: '1',
	name: '2021/10/2 21:21:42',
	name1: '兑换红包[50元现金红包]减少积分',
	name2: '-22000',
	name3: 7464
},{
	key: '2',
	name: '2021/9/18 11:38:30',
	name1: '支付宝充值10元 赠送积分',
	name2: '+10',
	name3: 29464
},{
	key: '3',
	name: '2021/9/17 18:44:55',
	name1: '支付宝充值51元 赠送积分',
	name2: '+51',
	name3: 29454
},{
	key: '4',
	name: '2021/9/17 18:39:57',
	name1: '支付宝充值80元 赠送积分',
	name2: '+80',
	name3: 29454
},{
	key: '5',
	name: '2021/9/17 12:30:52',
	name1: '支付宝充值50元 赠送积分',
	name2: '+80',
	name3: 29454
}];
	

class Order extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<>
				<Form ref={this.formRef} layout="inline">
					<Form.Item
                        name="value2"
                    >
                    	<Select placeholder="请选择" style={{ width: 120 }}>
					      <Option value="1">全部积分订单</Option>
					      <Option value="2">优惠券</Option>
					      <Option value="3">电话充值卡</Option>
					      <Option value="4">红包</Option>
					    </Select>
                    </Form.Item>
                    <Form.Item
                        name="value3"
                    >
                    	<RangePicker />
                    </Form.Item>
                    <Form.Item>
                    	<Button type="primary">
			                搜索
			            </Button>
						<span style={{marginLeft: 10}}>
							<span>已使用： <span style={{color: 'red'}}>20000 积分</span></span>
							<span style={{marginLeft: 10}}>剩余： <span style={{color: 'red'}}>7464 积分</span></span>
						</span>
                    </Form.Item>
				</Form>
				<div style={{paddingTop: 10}}>
					<Table dataSource={dataSource} columns={columns} size="small" />
				</div>
			</>
		)
	}
}

class Report extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<>
				<Form ref={this.formRef} layout="inline">
					<Form.Item
                        name="value2"
                    >
                    	<Select placeholder="请选择" style={{ width: 120 }}>
					      <Option value="1">全部类型记录</Option>
					      <Option value="2">在线支付</Option>
					      <Option value="3">线下打款</Option>
					      <Option value="4">收益钱包转普通钱包</Option>
					      <Option value="5">签到赠送</Option>
					      <Option value="6">兑换消费</Option>
					    </Select>
                    </Form.Item>
                    <Form.Item
                        name="value3"
                    >
                    	<Select placeholder="请选择" style={{ width: 120 }}>
					      <Option value="1">全部活动记录</Option>
					    </Select>
                    </Form.Item>
                    <Form.Item
                        name="value3"
                    >
                    	<RangePicker />
                    </Form.Item>
                    <Form.Item>
                    	<Button type="primary">
			                搜索
			            </Button>
                    </Form.Item>
				</Form>
				<div style={{paddingTop: 10}}>
					<Table dataSource={dataSource1} columns={columns1} size="small" />
				</div>
			</>
		)
	}
}

class Coupon extends React.Component{
	formRef = React.createRef<FormInstance>();
	handelClick = () => {
		confirm({
		    title: '提示信息',
		    icon: <ExclamationCircleOutlined />,
		    content: '你确定兑换此优惠券吗?',
		    onOk() {
		      console.log('OK');
		    },
		    onCancel() {
		      console.log('Cancel');
		    },
		});
	}
	handelOff = () => {
		Modal.info({
		    title: '信息',
		    content: (
		      <div>
		        <p>提示： 兑换所需积分不足，账号剩余7579分，谢谢！</p>
		      </div>
		    ),
		    onOk() {},
		});
	}
	render(){
		return (
			<>
				<Form ref={this.formRef} layout="inline">
					<Form.Item
                        name="value2"
                    >
                    	<Select placeholder="请选择" style={{ width: 120 }}>
					      <Option value="1">全部类型记录</Option>
					      <Option value="2">媒介红包</Option>
					      <Option value="3">现金红包</Option>
					    </Select>
                    </Form.Item>
                    <Form.Item>
                    	<Button type="primary">
			                搜索
			            </Button>
                    </Form.Item>
				</Form>
				<div style={{paddingTop: 10}}>
					<Row gutter={16}>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image1} />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelClick()} type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image2}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image3}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image4}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      	</Row>	
			      	<Row gutter={16} style={{paddingTop: 16}}>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image5}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image6}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image7}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      		<Col span={6}>
			      			<Card
							    hoverable
							    style={{ width: '100%' }}
							    cover={<img alt="example" src={image8}  />}
							>
								<Meta title={(
									<>
										20元优惠卷
										<Button onClick={() => this.handelOff()}  type="primary" style={{float: 'right'}}>
											
											立即兑换
										</Button>
									</>
								)} description="4张*5元消费满10元可用一张" />
							</Card>
			      		</Col>
			      	</Row>
				</div>
			</>
		)
	}
}


export default class MyOrder extends React.Component{
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Card title="积分管理" bordered={false} style={{ width: '100%' }}>
					<Tabs defaultActiveKey="1" >
					    <TabPane tab="积分订单" key="1">
					      	<Order/>
					    </TabPane>
					    <TabPane tab="积分报表" key="2">
					      	<Report/>
					    </TabPane>
					    <TabPane tab="积分商城" key="3">
					      	<Coupon/>
					    </TabPane>
					</Tabs>
				</Card>
			</div>
		)
	}
}